<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <p>Hello world!</p>
    Hello world! 2
    <p id="origin">Hello world! 3</p>
    Hello world! 4
    <p>Hello world! 5</p>
  </div>

  <script>
    const origin = document.querySelector('#origin')

    // 上一个兄弟节点
    const previousSibling = origin.previousSibling
    console.log(previousSibling)

    // 下一个兄弟节点
    const nextSibling = origin.nextSibling
    console.log(nextSibling)

    // 上一个兄弟元素节点
    let previousElementSibling = origin.previousElementSibling
    console.log(previousElementSibling)

    // 上一个兄弟元素节点
    function getPreviousElementSibling(node) {
      while (node = node.previousSibling) {
        if (Node.ELEMENT_NODE === node.nodeType) {
          return node
        }
      }
      return null
    }
    previousElementSibling = getPreviousElementSibling(origin)
    console.log(previousElementSibling)

    // 下一个兄弟元素节点
    let nextElementSibling = origin.nextElementSibling
    console.log(nextElementSibling)

    // 下一个兄弟元素节点
    function getNextElementSibling(node) {
      while (node = node.nextSibling) {
        if (Node.ELEMENT_NODE === node.nodeType) {
          return node
        }
      }
      return null
    }
    nextElementSibling = getNextElementSibling(origin)
    console.log(nextElementSibling)
  </script>
</body>

</html>